window.addEventListener('load', function() {
	//1.获取 元素
	var larraw = document.querySelector('.arrow-l');
	var rarraw = document.querySelector('.arrow-r');
	var focus = document.querySelector('.focus');
	var focusWidth = focus.offsetWidth;

	var timer = setInterval(function() {
		//手动调用点击事件
		rarraw.click()
	}, 2000);

	focus.addEventListener('mouseenter', function() {
		larraw.style.display = 'block';
		rarraw.style.display = 'block';
		clearInterval(timer);
		timer = null; //清除定时器变量
	})
	focus.addEventListener('mouseleave', function() {
		larraw.style.display = 'none';
		rarraw.style.display = 'none';
		timer = setInterval(function() {
			//手动调用点击事件
			rarraw.click()
		}, 2000);
	})

	//2.动态生成小圈圈
	var ul = focus.querySelector('ul');
	var ol = focus.querySelector('ol');

	console.log(ul.children.length);
	for (var i = 0; i < ul.children.length; i++) {
		//创建一个小li
		var li = document.createElement('li');
		//添加自定义属性,轮播图使用
		li.setAttribute('index', i);
		//把小li放入到ol中
		ol.appendChild(li);
		li.addEventListener('click', function() {
			for (var k = 0; k < ol.children.length; k++) {
				ol.children[k].className = '';
			}
			this.className = 'current';
			//点击圆圈,获取index,计算移动距离
			var index = this.getAttribute('index');
			num = index;

			circle = index;
			//获取ul框的宽度
			var focusWidth = focus.offsetWidth;

			animate(ul, -index * focusWidth)

		})

	}
	ol.children[0].className = 'current';

	//3.左右箭头移动图片

	//克隆第一张图片放到ul最后面	true深克隆
	var first = ul.children[0].cloneNode(true);
	ul.appendChild(first);

	var num = 0;
	var circle = 0; //记录小圆圈的记录
	rarraw.addEventListener('click', function() {
		num++;
		animate(ul, -num * focusWidth);
		if (ol.children.length == num) {
			ul.style.left = 0 + 'px';
			num = 0;
		}
		circle++;
		if (circle == ul.children.length - 1) {
			circle = 0;
		}

		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}

		ol.children[circle].className = 'current';
	});

	larraw.addEventListener('click', function() {
		if (num == 0) {
			ul.style.left = -(ul) * focusWidth + 'px';
			num = ul.children.length - 1;
		}
		num--;
		animate(ul, -num * focusWidth);
		circle++;
		if (circle < 0) {
			circle = ol.children.length - 1;
		}

		for (var i = 0; i < ol.children.length; i++) {
			ol.children[i].className = '';
		}

		ol.children[circle].className = 'current';
	});

})
